<template>
    <div class="emsdeviceknowledge">
        <HeaderTitle title="设备知识" des="设备的相关知识库" :imgUrl="require('@/static/imgs/repository-reg.png')"> </HeaderTitle>
        <el-card class="box-card btn-search">
            <div slot="header" class="clearfix">
                <div class="btn-box">
                    <el-button type="info" icon="el-icon-refresh-left"></el-button>
                    <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addFun"
                    >新增</el-button
                    >
                    <el-button type="success" icon="el-icon-edit" :disabled="selectionList.length !== 1" @click="handleUpdate(selectionList[0])">编辑</el-button>
                    <el-button type="danger" icon="el-icon-circle-close" :disabled="!selectionList.length" @click="deletes('delMultil')">删除</el-button>
                </div>
                <div class="icon-box">
                    <i class="el-icon-refresh" @click="refreshChange"></i>
                    <i class="el-icon-setting" @click="columnShow"></i>
                </div>
            </div>
            <div>
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="知识设备名称">
                        <el-input placeholder="请输入知识设备名称" v-model="searchForm.dataName" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="searchChange">查询</el-button>
                        <el-button icon="el-icon-refresh-right" @click="resetBtn">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
        <basic-container>
            <el-row :span="24">
                <el-col :xs="5" :sm="5" :md="5" class="user__tree">
                    <avue-tree
                            :option="treeOption"
                            :data="treeData"
                            @node-click="nodeClick"
                    >
            <span class="el-tree-node__label" slot-scope="{ node, data }">
              <el-tooltip
                      class="item"
                      effect="dark"
                      content="无数据权限"
                      placement="right-start"
                      v-if="data.isLock"
              >
                <span>{{ node.label }} <i class="el-icon-lock"></i></span>
              </el-tooltip>
              <span v-if="!data.isLock">{{ node.label }}</span>
            </span>
                    </avue-tree>
                </el-col>
                <el-col :xs="19" :sm="19" :md="19" class="kno_list">
                    <p style="text-align: center">
                        <IconTitle class="selfTitle" title="知识设备列表" imgUrl="yunwei" />
                    </p>
                    <div>
                        <div class="knoItem" v-for="(item,index) in list">
                            <div class="left">
                                <img :src="item.filesArray&&item.filesArray[0]&&item.filesArray[0].url"/>
                            </div>
                            <div class="right">
                                <p class="title">{{item.title}} <span class="remark">【{{item.briefIntroduction}}】</span></p>
                                <div class="content">
                                    <div class="kno_content">{{item.knowledgeContent}}</div>
                                    <div class="buttons">
                                        <el-button
                                        v-if="sys_user_del"
                                        type="text"
                                        size="small"
                                        icon="el-icon-delete"
                                        @click="deletes('',item)"
                                    >删除
                                        </el-button>
                                        <el-button
                                                v-if="sys_user_edit"
                                                type="text"
                                                size="small"
                                                icon="el-icon-edit"
                                                @click="handleUpdate(item, index)"
                                        >编辑
                                        </el-button>
                                    </div>
                                </div>
                                <p class="updateTime">{{item.updateTime}}</p>
                            </div>
                        </div>
                    </div>
                    <p style="text-align: right;width: 100%">
                        <el-pagination
                                @size-change="sizeChange"
                                @current-change="currentChange"
                                :current-page="page.currentPage"
                                :page-sizes="[10, 20, 30, 40, 50, 100]"
                                :page-size="page.pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="page.total">
                        </el-pagination>
                    </p>
                   <!-- <avue-crud
                            ref="crud"
                            :option="option"
                            v-model="form"
                            :page.sync="page"
                            :table-loading="listLoading"
                            @selection-change="selectionChange"
                            :before-open="handleOpenBefore"
                            :data="list"
                            @on-load="getList"
                            @search-change="searchChange"
                            @refresh-change="refreshChange"
                            @size-change="sizeChange"
                            @current-change="currentChange"
                            @row-save="create"
                    >
                        <template slot="header">
                            <div style="margin-bottom: 8px">
                                <IconTitle class="selfTitle" title="知识设备列表" imgUrl="yunwei" />
                            </div>
                        </template>
                        <template slot="dataName" slot-scope="scope">
                            <span>{{ scope.row.dataName }}</span>
                        </template>
                        <template slot="menu" slot-scope="scope">
                            <el-button
                                    v-if="sys_user_del"
                                    type="text"
                                    size="small"
                                    icon="el-icon-delete"
                                    @click="deletes('',scope.row)"
                            >删除
                            </el-button>
                            <el-button
                                    v-if="sys_user_edit"
                                    type="text"
                                    size="small"
                                    icon="el-icon-edit"
                                    @click="handleUpdate(scope.row, scope.index)"
                            >编辑
                            </el-button>
                        &lt;!&ndash;    <el-button
                                    type="text"
                                    size="small"
                                    icon="el-icon-view"
                                    @click="handleView(scope.row, scope.index)"
                            >查看
                            </el-button>&ndash;&gt;
                        </template>
                    </avue-crud>-->
                </el-col>
            </el-row>
            <el-dialog
                    class="avue-dialog avue-dialog--top"
                    title="知识设备管理"
                    v-if="regulationDialogVisible"
                    :visible.sync="regulationDialogVisible"
                    width="50%">
                <Info v-if="regulationDialogVisible" :regulationTreeData="regulationTreeData" :regulationId="regulationId" :isView="isView" @cancelFun="cancelFun" @sureFun="sureFun"></Info>
            </el-dialog>
        </basic-container>

    </div>
</template>

<script>
    import {fetchList, fetchTree, addObj, putObj, delObj} from "@/api/ems/repository/emsdeviceknowledge";
    import { tableOption } from '@/const/crud/ems/repository/emsdeviceknowledge'
    import { mapGetters } from "vuex";
    import IconTitle from "@/components/icon-title/index.vue";
    import Info from "./info.vue";
    import HeaderTitle from "../components/header-title/index"
    export default {
        name: "emsdeviceknowledge",
        components: {
            IconTitle,
            Info,
            HeaderTitle
        },
        data() {
            return {
                selectionList: [],
                regulationId: null,
                isView: false,
                regulationDialogVisible: false,
                searchForm: {
                    dataName: null
                },
                treeOption: {
                    nodeKey: "id",
                    addBtn: false,
                    menu: false,
                    defaultExpandAll: true,
                    props: {
                        label: "name",
                        value: "id",
                    },
                },
                regulationTreeData: [],
                treeData: [],
                option: tableOption,
                defaultProps: {
                    label: "name",
                    value: "id",
                },
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 10, // 每页显示多少条,
                    isAsc: false, // 是否倒序
                },
                list: [],
                listLoading: true,
                role: [],
                form: {},
            };
        },
        computed: {
            ...mapGetters(["permissions"]),
        },
        watch: {
            role() {
                this.form.role = this.role;
            },
        },
        created() {
            this.sys_user_add = this.permissions["sys_user_add"];
            this.sys_user_edit = this.permissions["sys_user_edit"];
            this.sys_user_del = this.permissions["sys_user_del"];
            this.init();
        },
        methods: {
            sureFun(data, regulationId){
                if(regulationId){
                    putObj(data)
                        .then(() => {
                            this.getList(this.page);
                            this.regulationDialogVisible = false
                            this.$notify.success("修改成功");
                        })
                        .catch(() => {
                            loading();
                        });
                }
                else{
                    addObj(data)
                        .then(() => {
                            this.getList(this.page);
                            this.regulationDialogVisible = false
                            this.$notify.success("创建成功");
                        })
                        .catch(() => {
                            loading();
                        });
                }
            },
            cancelFun(){
                this.regulationDialogVisible = false
            },
            resetBtn(){
                this.searchForm.dataName = null;
            },
            init() {
                let me = this
                fetchTree({type: "ems_device_knowledge"}).then((response) => {
                    me.regulationTreeData = response.data.data
                    me.treeData = [{
                        delFlag: "0",
                        id: 1,
                        name: "所有类型",
                        parentId: -1,
                        remark: "",
                        type: "all",
                        weight: "1",
                        children: response.data.data
                    }]
                    me.getList(this.page);
                });

            },
            nodeClick(data) {
                this.page.page = 1;
                this.getList(this.page, { category: data.id });
            },
            getList(page, params) {
                this.listLoading = true;
                fetchList(
                    Object.assign(
                        {
                            current: page.currentPage,
                            size: page.pageSize,
                            category: '',
                        },
                        params,
                        this.searchForm
                    )
                ).then((response) => {
                    console.log(response.data.data.records);
                    this.list = response.data.data.records;
                    this.page.total = response.data.data.total;
                    this.listLoading = false;
                });
            },
            searchChange(param, done) {
                this.page.currentPage = 1
                this.getList(this.page, this.searchForm)
            },
            columnShow(){
                this.$refs.crud.$refs.dialogColumn.columnBox=!0
            },
            sizeChange(pageSize) {
                this.page.pageSize = pageSize;
                this.page.currentPage = 1;
                this.getList(this.page, this.searchForm)
            },
            currentChange(current) {
                this.page.currentPage = current;
                this.getList(this.page, this.searchForm)
            },
            selectionChange(list) {
                this.selectionList = list;
            },
            refreshChange() {
                this.getList(this.page);
            },
            handleOpenBefore(show, type) {
            },
            addFun() {
                this.isView = false
                this.regulationId = null
                this.regulationDialogVisible = true
            },
            handleUpdate(row, index) {
                this.isView = false
                this.regulationId = row.id
                this.regulationDialogVisible = true
            },
            handleView(row, index) {
                this.isView = true
                this.regulationId = row.id
                this.regulationDialogVisible = true
            },
            create(row, done, loading) {
                addObj(this.form)
                    .then(() => {
                        this.getList(this.page);
                        done();
                        this.$notify.success("创建成功");
                    })
                    .catch(() => {
                        loading();
                    });
            },
            deletes(isMulti,row) {
                let id = ''
                this.$confirm(
                    "此操作将永久删除该条数据,是否继续?",
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }
                ).then(() => {
                    if(isMulti =='delMultil'){
                        id = this.selectionList.map(item=>item.id).toString()
                    }else{
                        id = row.id
                    }
                    delObj(id).then(() => {
                        this.getList(this.page);
                        this.$notify.success("删除成功");
                    })
                        .catch(() => {
                            this.$notify.error("删除失败");
                        });
                });
            }
        }
    };
</script>
<style lang="scss">
    .emsdeviceknowledge {
        height: 100%;
        &__tree {
            padding-top: 3px;
            padding-right: 20px;
        }

        &__main {
            .el-card__body {
                padding-top: 0;
            }
        }
        .kno_list{
            text-align: center;
            .knoItem{
                padding: 10px 0;
                margin: 10px 0;
                border-bottom: 1px solid #EBEDF3;
                display: flex;
                color: #AEAEB2;
                width: 100%;
                .left{
                    width: 150px;
                    img{
                        width: 100px;
                        height: 55px;
                    }
                }
                .right{
                    width: 100%;
                    text-align: left;
                    .title{
                        color: #606266;
                        font-weight: 800;
                        font-size: 16px;
                        .remark{
                            color: #1584FC;
                        }
                    }
                    .content{
                        display: flex;
                        .kno_content{
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                            overflow: hidden;
                            height: 32px;
                            flex: 1;
                        }
                        /*justify-content: space-between;*/
                        .buttons{
                            flex-basis: 140px;
                            text-align: right;
                        }
                    }
                    .updateTime{
                        text-align: right;
                    }
                }
            }
        }
    }
</style>

